<template>
  <div class="transaction-cell">
    <van-swipe-cell>
      <van-cell center :title="data.title">
        <template #label>
          <div class="custom-babel">{{data.label}}</div>
          <div class="custom-babel-date">{{date}}</div>
        </template>
        <template #default>
          <div class="custom-extra-value" :class="gain">
            {{data.price}}
          </div>
          <div class="custom-extra-status">
            {{data.status}}
          </div>
        </template>
      </van-cell>
      <template #right>
        <van-button square type="danger" text="删除" @click="deleteHandle"></van-button>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import format from '@/utils/formatDate'
import { Button } from "vant";
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  computed: {
    date() {
      return format(this.data.date);
    },
    gain: function() {
      return {
        // "custom-extra-value":this.data.price.indexof('-') > -1  (this.data.price >> 0) < 0,
         "custom-extra-red-value": this.data.price.indexOf('+') > -1 && (this.data.price >> 0) > 0
      }
    }
  },
  methods: {
    deleteHandle() {
      // 需要删除的cell id
      this.$emit("delete", this.data.id);
    }
  }
};
</script>

<style lang="scss" scoped>
  .custom-extra-value {
    color: #000;
    font-weight: bold;
  }
  .custom-extra-red-value {
    color: red;
    font-weight: bold
  }
  .custom-extra-status {
    font-size: 12px;
  }
</style>